<template>
  <el-form
    ref="myForm"
    class="handle"
    inline
    :model="addParams"
    :rules="formRules"
  >
    <xz-message
      :visible="jlVisible || ryVisible"
      :type="jlBarType"
      :msg="personType"
    ></xz-message>
    <!--  基本信息开始  -->
    <div class="info-box">
      <div class="box-title">
        <div class="title">基本信息</div>
      </div>
      <div class="box-content">
        <el-form-item prop="dyzpUrl">
          <el-upload
            action="#"
            :http-request="handleAvatarSuccess"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            accept=".jpg,.jpeg">
            <div class="picture-box">
              <div class="default-picture">
                <span>证件照片</span>
              </div>
              <img class="picture" v-if="addParams.dyzpUrl" :src="'data:image/jpg;base64,' + addParams.dyzpUrl">
            </div>
          </el-upload>
        </el-form-item>
        <!--<div class="picture-box">-->
          <!--<div class="default-picture">-->
            <!--<span>证件照片</span>-->
          <!--</div>-->
          <!--<img-->
            <!--class="picture"-->
            <!--v-if="addParams.dyzpUrl"-->
            <!--:src="'data:image/jpg;base64,' + addParams.dyzpUrl"-->
            <!--alt=""-->
          <!--/>-->
        <!--</div>-->
        <div class="form-box">
          <div class="form">
            <el-form-item class="input-item" label="身份证号：" prop="gmsfhm">
              <el-input
                placeholder="请输入"
                v-model="addParams.gmsfhm"
              ></el-input>
            </el-form-item>
            <el-form-item class="input-item" label="姓名：" prop="xm">
              <el-input
                placeholder="请输入"
                v-model="addParams.xm"
                :validate-event="false"
              ></el-input>
            </el-form-item>
            <el-form-item
              class="input-item long-label"
              label="性别："
              prop="xbdm"
            >
              <el-select
                placeholder="请选择"
                v-model="addParams.xbdm"
                :validate-event="false"
              >
                <el-option
                  v-for="item in sexData"
                  :key="item.code"
                  :label="item.value"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="input-item" label="出生日期：" prop="csrq">
              <el-date-picker
                value-format="yyyyMMdd"
                type="date"
                v-model="addParams.csrq"
                placeholder="请选择"
                :validate-event="false"
              ></el-date-picker>
              <!-- <el-input
                readonly
                placeholder="只读"
                v-model="addParams.csrq"
                :validate-event="false"
              ></el-input> -->
            </el-form-item>
            <el-form-item class="input-item" label="民族：" prop="mzdm">
              <el-select
                placeholder="请选择"
                v-model="addParams.mzdm"
                :validate-event="false"
              >
                <el-option
                  v-for="item in mzData"
                  :key="item.code"
                  :label="item.value"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              class="input-item long-label"
              label="身份证签发机关："
              prop="sfzqfjg"
            >
              <el-input
                placeholder="请输入"
                v-model="addParams.sfzqfjg"
                :validate-event="false"
              ></el-input>
            </el-form-item>

            <!-- <el-form-item
              class="input-item zz-content"
              label="住址："
              prop="sfzqfjg"
            >
              <el-input
                readonly
                placeholder="只读"
                v-model="addParams.sfzqfjg"
                :validate-event="false"
              ></el-input>
            </el-form-item> -->
            <el-form-item class="input-item" label="手机号码：" prop="lxdh">
              <el-input
                placeholder="请输入"
                v-model="addParams.lxdh"
                :maxlength="11"
                :validate-event="false"
              ></el-input>
            </el-form-item>
            <el-form-item
              class="input-item"
              label="曾用名："
              prop="cym"
            >
              <el-input placeholder="请输入" v-model="addParams.cym"></el-input>
            </el-form-item>
            <!-- <el-form-item
              class="input-item exp-item"
              label="有效期限："
              prop="sfzqfjg"
            >
              <el-input
                readonly
                placeholder="只读"
                v-model="addParams.sfzqfjg"
                :validate-event="false"
              ></el-input>
              <span style="margin: 0 10px">-</span>
              <el-input
                readonly
                placeholder="只读"
                v-model="addParams.sfzqfjg"
                :validate-event="false"
              ></el-input>
            </el-form-item> -->

            <br />
            <el-form-item
              class="input-item hjdz-content"
              label="户籍地址："
              prop="_hjdzSsxqdm"
            >
              <el-input
                @click.native="openHjdz"
                readonly
                placeholder="请选择"
                v-model="addParams._hjdzSsxqdm"
                :validate-event="false"
              ></el-input>
            </el-form-item>
            <el-form-item class="input-item hjdzxx-content" prop="hjdzQhnxxdz">
              <el-input
                placeholder="请输入"
                v-model="addParams.hjdzQhnxxdz"
                :validate-event="false"
              ></el-input>
            </el-form-item>
          </div>
          <div class="buttons">
            <el-button class="btn-out-line" @click="openCardDialog"
              >刷身份证</el-button
            >
            <el-button class="btn-out-line" @click="verifyPerson"
              >身份校验</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <!--  基本信息结束  -->
    <!--  居住信息开始  -->
    <div class="info-box jz-info">
      <div class="box-title">
        <div class="title">居住信息</div>
      </div>
      <div class="box-content">
        <div class="form-box">
          <div class="form">
            <el-form-item
              class="input-item addr-content"
              label="暂(居)住地址："
              prop="_zjzdzSsxqdm"
            >
              <el-input
                @click.native="openZjzdz"
                readonly
                placeholder="请选择"
                v-model="addParams._zjzdzSsxqdm"
                :validate-event="false"
              ></el-input>
            </el-form-item>
            <el-form-item class="input-item long-content" prop="zjzdzQhnxxdz">
              <el-input
                placeholder="请输入"
                v-model="addParams.zjzdzQhnxxdz"
                :validate-event="false"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item
              class="input-item"
              label="迁(流)入日期："
              prop="qlrrq"
            >
              <el-date-picker
                value-format="yyyyMMdd"
                type="date"
                v-model="addParams.qlrrq"
                placeholder="请选择"
                :validate-event="false"
              ></el-date-picker>
            </el-form-item> -->
            <el-form-item
              class="input-item"
              label="暂(居)住处所："
              prop="zjzcsfldm"
            >
              <el-select
                placeholder="请选择"
                v-model="addParams.zjzcsfldm"
                :validate-event="false"
              >
                <el-option
                  v-for="item in jzcsOptions"
                  :key="item.code"
                  :label="item.value"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              class="input-item long-label"
              label="申请期限："
              prop="sqqx"
            >
              <el-select
                disabled
                placeholder="请选择"
                v-model="addParams.sqqx"
                :validate-event="false"
              >
                <el-option
                  v-for="item in sqqxOptions"
                  :key="item.code"
                  :label="item.value"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              class="input-item long-label"
              label="暂(居)住事由："
              prop="zjzsydm"
            >
              <el-select
                placeholder="请选择"
                v-model="addParams.zjzsydm"
                :validate-event="false"
              >
                <el-option
                  v-for="item in jzsyOptions"
                  :key="item.code"
                  :label="item.value"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              class="input-item"
              label="服务处所："
              prop="fwcs"
            >
              <el-input
                placeholder="请输入"
                v-model="addParams.fwcs"
                :validate-event="false"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item
              class="input-item long-label"
              label="受理类别："
              prop="slly"
            >
              <el-select
                placeholder="请选择"
                v-model="addParams.slly"
                :validate-event="false"
              >
                <el-option
                  v-for="item in sllbOptions"
                  :key="item.code"
                  :label="item.value"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item
              class="input-item long-label"
              label="来自地国家："
              prop="lzdGjhdqdm"
            >
              <el-select
                placeholder="请选择"
                v-model="addParams.lzdGjhdqdm"
                :validate-event="false"
              >
                <el-option
                  v-for="item in gjOptions"
                  :key="item.code"
                  :label="item.value"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item
              class="input-item addr-content"
              label="来自地住址："
              prop="_lzdSsxqdm"
            >
              <el-input
                @click.native="openLzdzz"
                readonly
                placeholder="请选择"
                v-model="addParams._lzdSsxqdm"
              ></el-input>
            </el-form-item>
            <el-form-item class="input-item long-content" prop="lzdQhnxxdz">
              <el-input
                placeholder="请输入"
                v-model="addParams.lzdQhnxxdz"
              ></el-input>
            </el-form-item> -->
          </div>
        </div>
      </div>
    </div>
    <!--  居住信息结束  -->
    <!--  联系人信息开始  -->
    <div class="info-box lxr-info">
      <div class="box-title">
        <div class="title">联系人信息</div>
      </div>
      <div class="box-content">
        <div class="form-box">
          <div class="form">
            <el-form-item
              class="input-item"
              label="身份证号："
              prop="lxrGmsfhm"
            >
              <el-input
                placeholder="请输入"
                v-model="addParams.lxrGmsfhm"
                :validate-event="false"
              ></el-input>
            </el-form-item>
            <el-form-item
              class="input-item long-label"
              label="姓名："
              prop="lxrXm"
            >
              <el-input
                placeholder="请输入"
                v-model="addParams.lxrXm"
                :validate-event="false"
              ></el-input>
            </el-form-item>
            <el-form-item
              class="input-item long-label"
              label="社会关系："
              prop="lxrRygxdm"
            >
              <el-select
                placeholder="请选择"
                v-model="addParams.lxrRygxdm"
                :validate-event="false"
              >
                <el-option
                  v-for="item in shgxOptions"
                  :key="item.code"
                  :label="item.value"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="input-item" label="手机号码：" prop="lxrLxdh">
              <el-input
                placeholder="请输入"
                v-model="addParams.lxrLxdh"
                :maxlength="11"
                :validate-event="false"
              ></el-input>
            </el-form-item>
            <br />
            <el-form-item
              class="input-item addr-content"
              label="住址信息："
              prop="_lxrSsxqdm"
            >
              <el-input
                @click.native="openLxrSsxqdm"
                readonly
                placeholder="请选择"
                v-model="addParams._lxrSsxqdm"
                :validate-event="false"
              ></el-input>
            </el-form-item>
            <el-form-item class="input-item long-content" prop="lxrQhnxxdz">
              <el-input
                placeholder="请输入"
                v-model="addParams.lxrQhnxxdz"
                :validate-event="false"
              ></el-input>
            </el-form-item>
          </div>
        </div>
      </div>
    </div>
    <!--  联系人信息结束  -->
    <div class="form-button-box">
      <el-form-item class="input-item">
        <el-button
          :class="['form-btn', canClick ? '' : 'disabled']"
          :disabled="!canClick"
          @click="onAccred">申领制证</el-button
        >
        <el-button
          :class="['form-btn', 'outline', canClick ? '' : 'disabled']"
          :disabled="!canClick"
          @click="onYsbf">遗失补办</el-button
        >
        <el-button
          :class="['form-btn', 'outline', canClick ? '' : 'disabled']"
          :disabled="!canClick"
          @click="onChangeInfo">信息变更</el-button
        >
        <el-button
          :class="['form-btn', 'outline', canClick ? '' : 'disabled']"
          :disabled="!canClick"
          @click="onReset">重新采集</el-button
        >
      </el-form-item>
    </div>

    <!--  生成登记卡  -->
    <card-dialog
      v-if="cardDialogVisible"
      :visible="cardDialogVisible"
      :rkbm="rkbm"
      @close="closeCardDialog"
      @submit="printCardDialog"
    ></card-dialog>
    <!--  生成登记卡  -->
    <card-dialog
      v-if="changeCardDialogVisible"
      :visible="changeCardDialogVisible"
      :rkbm="rkbm"
      @close="closeChangeCardDialog"
      @submit="printChangeCardDialog"
    ></card-dialog>
    <!--  打印确认  -->
    <print-dialog
      v-if="printDialogVisible"
      :visible="printDialogVisible"
      @close="closePrintDialog"
      @submit="successPrintDialog"
    ></print-dialog>

    <!--  记录  -->
    <xz-person-record
      :visible="jlVisible || ryVisible"
      :type="jlType"
      :value="gwjlTotal"
      @click="goHandleRecord"
    ></xz-person-record>

    <!-- 刷卡 -->
    <shuaka-dialog
      :visible="shuakaVisible"
      @close="closeShuakaDialog"
    ></shuaka-dialog>
    <!-- 户籍地址 -->
    <my-address
      :visible="hjdzVisible"
      :isEmpty="hjdzIsEmpty"
      @cancel="cancelHjdz"
      @submit="getHjdzDetail"
    ></my-address>
    <!-- 暂住地址 -->
    <my-address
      :visible="zjzdzVisible"
      :isEmpty="zjzdzIsEmpty"
      :addressLv="addressLv"
      @cancel="cancelZjzdz"
      @submit="getZjzdzDetail"
    ></my-address>
    <!-- 来自地住址 -->
    <my-address
      :visible="lzdzzVisible"
      :isEmpty="lzdzzIsEmpty"
      @cancel="cancelLzdzz"
      @submit="getLzdzzDetail"
    ></my-address>
    <!-- 联系人住址 -->
    <my-address
      :visible="lxrSsxqdmVisible"
      :isEmpty="lxrSsxqdmIsEmpty"
      @cancel="cancelLxrSsxqdm"
      @submit="getLxrSsxqdmDetail"
    ></my-address>

    <div class="handle-record-wrap">
      <router-view></router-view>
    </div>

    <el-dialog
      title="未检测到插件，请点击下载！"
      :visible.sync="downloadVisible"
      width="500px"
      :before-close="() => {this.downloadVisible = false}">
      <div class="file-wrap">
        <a :href="$BASE_URL + '/cardservice_icr100_64.exe'" @click="downloadVisible = false" class="file-item">
          <div class="file-icon"><i class="el-icon-download"></i></div>
          <div class="file-name">点击下载64位</div>
        </a>
        <a :href="$BASE_URL + '/cardservice_icr100_32.exe'" @click="downloadVisible = false" class="file-item">
          <div class="file-icon"><i class="el-icon-download"></i></div>
          <div class="file-name">点击下载32位</div>
        </a>
      </div>
    </el-dialog>
  </el-form>
</template>

<script type="text/ecmascript-6">
import XzMessage from '@/components/xz-message'
import MyAddress from '@/components/my-address'
import CardDialog from './card-dialog'
import PrintDialog from './print-dialog'
import ShuakaDialog from './shuaka-dialog'
import XzPersonRecord from '@/components/xz-person-record'
import readCard from '../../utils/readCard'
import { getStore } from '../../utils/storage'
import * as imageConversion from 'image-conversion'
// import { getDicVal } from '../../utils/utils'

export default {
  name: 'handle',
  components: {
    XzMessage,
    CardDialog,
    PrintDialog,
    XzPersonRecord,
    ShuakaDialog,
    MyAddress
  },
  data () {
    return {
      isClick: false,
      canClick: false,
      cardDialogVisible: false,
      changeCardDialogVisible: false,
      printDialogVisible: false,
      shuakaVisible: false,
      // 户籍地址
      hjdzIsEmpty: false,
      hjdzVisible: false,
      // 暂居住地址
      zjzdzIsEmpty: false,
      zjzdzVisible: false,
      // 来自地住址
      lzdzzIsEmpty: false,
      lzdzzVisible: false,
      // 联系人住址
      lxrSsxqdmIsEmpty: false,
      lxrSsxqdmVisible: false,
      downloadVisible: false,
      groupCode: '',
      // 申领制证
      addParams: {
        dyzpUrl: '', // 照片（二代身份照片）base64
        gmsfhm: '', // 身份证号码
        xm: '', // 姓名
        xbdm: '', // 性别
        // _xbdm: '', // 性别
        mzdm: '', // 民族
        // _mzdm: '', // 民族
        csrq: '', // 出生日期
        cym: '', // 曾用名
        hjdzSsxqdm: '', // 户籍地址_省市县（区）
        _hjdzSsxqdm: '', // 户籍地址_省市县（区）
        hjdzQhnxxdz: ' ', // 户籍地址_区划内详细地址
        lxdh: '', // 联系电话
        sfzqfjg: '', // 身份证签发机关

        zjzdzSsxqdm: '', // 暂（居）住地址_省市县（区）
        _zjzdzSsxqdm: '', // 暂（居）住地址_省市县（区）
        zjzdzQhnxxdz: ' ', // 暂（居）住地址_区划内详细地址
        qlrrq: '', // 迁（流）入日期
        zjzcsfldm: '', // 暂（居）住处所
        sqqx: '', // 申请期限（字典类别：sqqx）
        zjzsydm: '', // 暂（居）住事由
        // slly: '', // 受理类别（字典类别：sllb）
        lzdGjhdqdm: '', // 来自地_国家（地区）
        lzdSsxqdm: '', // 来自地_省市县（区）
        _lzdSsxqdm: '', // 来自地_省市县（区）
        lzdQhnxxdz: ' ', // 来自地_区划内详细地址
        fwcs: '', // 服务处所

        lxrGmsfhm: '', // 联系人_公民身份号码
        lxrXm: '', // 联系人_姓名
        lxrRygxdm: '', // 联系人_社会关系
        lxrLxdh: '', // 联系人_联系电话
        lxrSsxqdm: '', // 联系人_省市县（区）
        _lxrSsxqdm: '', // 联系人_省市县（区）
        lxrQhnxxdz: ' ' // 联系人_区划内详细地址
      },
      formRules: {
        dyzpUrl: [{ required: true, message: '请上传照片' }],
        gmsfhm: [
          { required: true, message: '请输入身份证号' },
          {
            pattern: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: '请输入正确的身份证号',
            trigger: 'change'
          }
        ],
        xm: [{ required: true, message: '请输入姓名' }],
        xbdm: [{ required: true, message: '请选择性别' }],
        mzdm: [{ required: true, message: '请选择民族' }],
        csrq: [{ required: true, message: '请选择出生日期' }],
        cym: [],
        _hjdzSsxqdm: [{ required: true, message: '请选择户籍地址' }],
        // hjdzQhnxxdz: [{ required: true, message: '请输入户籍地址详细地址' }],
        lxdh: [
          { required: true, message: '请输入手机号码' },
          {
            pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
            message: '请输入正确的手机号码'
          }
        ],
        sfzqfjg: [
          {
            required: true,
            message: '请输入身份证签发机关'
          }
        ],
        _zjzdzSsxqdm: [{ required: true, message: '请选择暂(居)住地址' }],
        // zjzdzQhnxxdz: [
        //   { required: false, message: '请输入暂(居)住地址详细地址' }
        // ],
        qlrrq: [{ required: true, message: '请选择迁(流)入日期' }],
        zjzcsfldm: [{ required: true, message: '请选择暂(居)住处所' }],
        sqqx: [{ required: true, message: '请选择申请期限' }],
        zjzsydm: [{ required: true, message: '请选择暂(居)住事由' }],
        // slly: [{ required: true, message: '请选择受理类别' }],
        lzdGjhdqdm: [{ required: false, message: '请选择来自地国家' }],
        fwcs: [{ required: true, message: '请输入服务处所' }],
        _lzdSsxqdm: [{ required: false, message: '请选择来自地住址' }],
        // lzdQhnxxdz: [{ required: false, message: '请选择来自地住址详细地址' }],

        lxrGmsfhm: [
          { required: true, message: '请输入联系人身份证号' },
          {
            pattern: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: '请输入正确的身份证号'
          }
        ],
        lxrXm: [{ required: true, message: '请输入联系人姓名' }],
        lxrRygxdm: [{ required: true, message: '请选择联系人社会关系' }],
        lxrLxdh: [
          { required: true, message: '请输入联系人手机号码' },
          {
            pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
            message: '请输入正确的手机号码'
          }
        ],
        _lxrSsxqdm: [{ required: true, message: '请选择联系人住址信息' }]
        // lxrQhnxxdz: [{ required: true, message: '请输入联系人详细地址' }]
      },
      // 遗失补卡
      ysbfParams: {
        rkbm: '',
        gmsfhm: ''
      },
      rkbm: '',
      sexData: [], // 性别
      mzData: [], // 民资
      jzcsOptions: [], // 居住场所下拉
      jzsyOptions: [], // 居住事由下拉
      // sllbOptions: [], // 受理类别下拉
      shgxOptions: [], // 社会关系下拉
      sqqxOptions: [], // 申请期限下拉
      gjOptions: [], // 国家
      jlVisible: false,
      ryVisible: false,
      personType: '',
      gwjlTotal: 0,
      jlType: '',
      jlBarType: '',
      hcxxParams: {
        xm: '',
        xb: '',
        csrq: '',
        sfzh: ''
      },
      dictionary: null,
      addressLv: 5,
      sbType: null,
      rememberChangeTime: null,
      timeIsChange: false,
      imgUrl: ''
    }
  },
  watch: {
    // 监听身份证输入
    'addParams.gmsfhm' (val) {
      this.$refs.myForm.validateField('gmsfhm', (valid) => {
        if (!valid) {
          this.getPersonInfo(val)
        }
      })
    },
    'addParams.sqqx' (val) {
      this.timeIsChange = val !== this.rememberChangeTime
    },
    rkbm (val) {
      if (val && this.isClick) {
        this.cardDialogVisible = true
      }
    },
    dictionary (dict) {
      if (dict) {
        this.addParams.lzdGjhdqdm = 'CHN'
        this.jzcsOptions = JSON.parse(dict).JZCSFL
        this.jzsyOptions = JSON.parse(dict).RKQYYY
        // this.sllbOptions = JSON.parse(dict).ZAGLXXLB
        this.shgxOptions = JSON.parse(dict).RYGX
        this.gjOptions = JSON.parse(dict).GJDQ
        this.sqqxOptions = JSON.parse(dict).DJKSLQX
        this.sexData = JSON.parse(dict).XB
        this.mzData = JSON.parse(dict).MZ

        this.addParams.sqqx = '6'
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      setTimeout(() => {
        this.dictionary = getStore('dictionary')
      }, 500)

      let cardNum = this.$route.query.cardNum
      if (cardNum) {
        let reg = /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
        if (reg.test(cardNum)) {
          this.getPersonInfo(cardNum)
        }
      }
    })
  },
  methods: {
    // 校验身份
    verifyPerson () {
      if (this.addParams.gmsfhm === '') {
        this.$message({
          message: '请输入身份证号',
          type: 'error',
          customClass: 'zZindex',
          duration: 5000
        })
        return
      } else {
        let reg = /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
        if (!reg.test(this.addParams.gmsfhm)) {
          this.$message({
            message: '请输入正确的身份证号',
            type: 'error',
            customClass: 'zZindex',
            duration: 5000
          })
          return
        } else {
          this.hcxxParams.sfzh = this.addParams.gmsfhm
        }
      }
      if (this.addParams.xm === '') {
        this.$message({
          message: '请输入姓名',
          type: 'error',
          customClass: 'zZindex',
          duration: 5000
        })
        return
      } else {
        this.hcxxParams.xm = this.addParams.xm
      }
      if (this.addParams.xbdm === '') {
        this.$message({
          message: '请选择性别',
          type: 'error',
          customClass: 'zZindex',
          duration: 5000
        })
        return
      } else {
        this.hcxxParams.xb = this.addParams.xbdm
      }
      if (this.addParams.csrq === '') {
        this.$message({
          message: '请选择出生日期',
          type: 'error',
          customClass: 'zZindex',
          duration: 5000
        })
        return
      } else {
        this.hcxxParams.csrq = this.addParams.csrq
      }

      this.hcxxHandle()
    },
    // 核验回调
    async hcxxHandle () {
      let res = await this.$http(this.$api.hcxxForcard, this.hcxxParams)
      if (res.code === 200) {
        // 空数组是正常人员
        let d = res.data
        this.jlType = 'normal'
        this.canClick = true
        // 显示过往记录
        this.queryBdData(this.addParams.gmsfhm)
        if (d.length === 0) {
          // 普通人员
          this.jlVisible = true
          this.jlBarType = 'normal'
        } else {
          // 重点人员
          this.ryVisible = true
          this.jlBarType = 'warning'
          let newArr = d.map(item => {
            return `${item.ryjbcn}（${item.rylbcn}）`
          })
          this.personType = newArr.join('、')
        }
      }
    },
    // 打开户籍地址
    openHjdz () {
      this.hjdzVisible = true
      this.hjdzIsEmpty = false
    },
    cancelHjdz () {
      this.hjdzVisible = false
      this.hjdzIsEmpty = true
    },
    // 获取户籍地址
    getHjdzDetail (detail, code) {
      this.addParams.hjdzSsxqdm = code[code.length - 1]
      this.addParams._hjdzSsxqdm = detail.join('')
      this.hjdzVisible = false
      this.hjdzIsEmpty = true
    },
    // 打开暂住地址
    openZjzdz () {
      this.zjzdzVisible = true
      this.zjzdzIsEmpty = false
      this.addressLv = 4
    },
    cancelZjzdz () {
      this.zjzdzVisible = false
      this.zjzdzIsEmpty = true
      this.addressLv = 5
    },
    // 获取暂住地址
    getZjzdzDetail (detail, code) {
      this.addParams.zjzdzSsxqdm = code[code.length - 1]
      this.addParams._zjzdzSsxqdm = detail.join('')
      this.zjzdzVisible = false
      this.zjzdzIsEmpty = true
      this.addressLv = 5
    },
    // 打开来自地住址
    openLzdzz () {
      this.lzdzzVisible = true
      this.lzdzzIsEmpty = false
    },
    cancelLzdzz () {
      this.lzdzzVisible = false
      this.lzdzzIsEmpty = true
    },
    // 获取来自地住址
    getLzdzzDetail (detail, code) {
      this.addParams.lzdSsxqdm = code[code.length - 1]
      this.addParams._lzdSsxqdm = detail.join('')
      this.lzdzzVisible = false
      this.lzdzzIsEmpty = true
    },
    // 联系人住址
    openLxrSsxqdm () {
      this.lxrSsxqdmVisible = true
      this.lxrSsxqdmIsEmpty = false
    },
    cancelLxrSsxqdm () {
      this.lxrSsxqdmVisible = false
      this.lxrSsxqdmIsEmpty = true
    },
    // 获取联系人住址
    getLxrSsxqdmDetail (detail, code) {
      this.addParams.lxrSsxqdm = code[code.length - 1]
      this.addParams._lxrSsxqdm = detail.join('')
      this.lxrSsxqdmVisible = false
      this.lxrSsxqdmIsEmpty = true
    },
    // 申领制证
    onAccred () {
      let params = JSON.parse(JSON.stringify(this.addParams))
      delete params._hjdzSsxqdm
      delete params._zjzdzSsxqdm
      delete params._lzdSsxqdm
      delete params._lxrSsxqdm
      params.csrq = params.csrq.replace(/-/g, '')
      params.qlrrq = params.qlrrq.replace(/-/g, '')
      if (params.hjdzQhnxxdz === '') {
        params.hjdzQhnxxdz = ' '
      }
      if (params.zjzdzQhnxxdz === '') {
        params.zjzdzQhnxxdz = ' '
      }
      if (params.lxrQhnxxdz === '') {
        params.lxrQhnxxdz = ' '
      }
      params.lzdSsxqdm = params.hjdzSsxqdm
      this.$refs.myForm.validate((valid) => {
        if (valid) {
          this.applyFunc(params)
        }
      })
    },
    // 申领制卡方法
    async applyFunc (params) {
      this.isClick = true
      let res = await this.$http(this.$api.addBeiAn, params)
      if (res.code === 200) {
        await this.getPersonInfo(params.gmsfhm)
        this.cardDialogVisible = true
        console.log('cardDialog', this.cardDialogVisible)
        this.sbType = '1'
      }
    },
    // 遗失补发
    async onYsbf () {
      let res = await this.$http(this.$api.ysbfDjk, this.ysbfParams)
      if (res.code === 200) {
        this.cardDialogVisible = true
        this.sbType = '4'
        this.$message({
          message: '遗失补办成功！',
          type: 'success',
          customClass: 'zZindex',
          duration: 5000
        })
      }
    },
    // 去登记卡办理下面的记录列表页
    goHandleRecord () {
      this.$router.push({
        path: '/handle/handle-record?card-no=' + this.addParams.gmsfhm + '&xm=' + this.addParams.xm
      })
    },
    // 制卡
    closeCardDialog () {
      this.cardDialogVisible = false
    },
    printCardDialog () {
      this.cardDialogVisible = false
      setTimeout(() => {
        this.printDialogVisible = true
      }, 300)
    },
    closeChangeCardDialog () {
      this.changeCardDialogVisible = false
    },
    printChangeCardDialog () {
      this.changeCardDialogVisible = false
      setTimeout(() => {
        this.printDialogVisible = true
      }, 300)
    },
    // 打印确认
    closePrintDialog () {
      this.printDialogVisible = false
    },
    successPrintDialog (type) {
      if (type === 'close') {
        this.printDialogVisible = false
        this.sbHandle()
      } else {
        // 重新打印
        this.printDialogVisible = false
        this.cardDialogVisible = true
      }
    },
    async sbHandle () {
      let res = await this.$http(this.$api.sbInfo, {
        gmsfhm: this.addParams.gmsfhm,
        sblx: this.sbType
      })
      if (res.code === 200) {
        this.$message({
          message: '上报成功！',
          type: 'success',
          customClass: 'zZindex',
          duration: 5000
        })
      }
    },
    formatBirth (val) {
      return val.slice(0, 4) + '-' + val.slice(4, 6) + '-' + val.slice(6, 8)
    },
    // 打开刷卡框
    openCardDialog () {
      this.onReset()
      this.shuakaVisible = true
      readCard().then((res) => {
        this.shuakaVisible = false
        if (res.resultFlag === 0) {
          let info = res.resultContent

          this.addParams.dyzpUrl = info.identityPic // 照片
          this.addParams.gmsfhm = info.certNumber // 身份证号码
          this.addParams.xm = info.partyName // 姓名
          let mzdm = String(info.nation)
          if (mzdm.length === 1) {
            info.nation = '0' + mzdm
          }
          this.addParams.xbdm = String(info.gender) // 性别
          // this.addParams._xbdm = getDicVal(this.sexData, String(info.gender)) // 性别
          this.addParams.mzdm = String(info.nation) // 民族
          // this.addParams._mzdm = getDicVal(this.mzData, String(info.nation)) // 民族
          // this.addParams.csrq = this.formatBirth(info.bornDay) // 出生日期
          this.addParams.csrq = info.bornDay // 出生日期
          this.addParams.sfzqfjg = info.certOrg // 身份证签发机关

          this.getPersonInfo(info.certNumber)
        } else {
          let msg = ''
          if (res.resultFlag === -1) {
            msg = '读卡超时！'
          } else if (res.resultFlag === -2) {
            msg = '读卡器错误！'
          }
          this.$message({
            message: msg,
            type: 'error',
            customClass: 'zZindex',
            duration: 5000
          })
        }
      }).catch(err => {
        if (typeof err === 'undefined') {
          this.shuakaVisible = false
          this.downloadVisible = true
        }
      })
    },
    // 关闭刷卡对话框
    closeShuakaDialog () {
      this.shuakaVisible = false
    },
    // 重新采集
    onReset () {
      this.addParams = {
        dyzpUrl: '', // 照片（二代身份照片）base64
        gmsfhm: '', // 身份证号码
        xm: '', // 姓名
        xbdm: '', // 性别
        // _xbdm: '', // 性别
        mzdm: '', // 民族
        // _mzdm: '', // 民族
        csrq: '', // 出生日期
        cym: '', // 曾用名
        hjdzSsxqdm: '', // 户籍地址_省市县（区）
        _hjdzSsxqdm: '', // 户籍地址_省市县（区）
        hjdzQhnxxdz: '', // 户籍地址_区划内详细地址
        lxdh: '', // 联系电话
        sfzqfjg: '', // 身份证签发机关

        zjzdzSsxqdm: '', // 暂（居）住地址_省市县（区）
        _zjzdzSsxqdm: '', // 暂（居）住地址_省市县（区）
        zjzdzQhnxxdz: '', // 暂（居）住地址_区划内详细地址
        qlrrq: '', // 迁（流）入日期
        zjzcsfldm: '', // 暂（居）住处所
        sqqx: '6', // 申请期限（字典类别：sqqx）
        zjzsydm: '', // 暂（居）住事由
        // slly: '', // 受理类别（字典类别：sllb）
        lzdGjhdqdm: 'CHN', // 来自地_国家（地区）
        lzdSsxqdm: '', // 来自地_省市县（区）
        _lzdSsxqdm: '', // 来自地_省市县（区）
        lzdQhnxxdz: '', // 来自地_区划内详细地址
        fwcs: '',

        lxrGmsfhm: '', // 联系人_公民身份号码
        lxrXm: '', // 联系人_姓名
        lxrRygxdm: '', // 联系人_社会关系
        lxrLxdh: '', // 联系人_联系电话
        lxrSsxqdm: '', // 联系人_省市县（区）
        _lxrSsxqdm: '', // 联系人_省市县（区）
        lxrQhnxxdz: '' // 联系人_区划内详细地址
      }
      this.jlVisible = false
      this.ryVisible = false
      this.gwjlTotal = 0
      this.jlType = ''
    },
    handleAvatarSuccess (data) {
      let _this = this
      let rd = new FileReader()
      let file = data.file
      rd.readAsDataURL(file)
      rd.onloadend = function (e) {
        let temp = this.result.match(/data:image\/jpeg;base64,(\S*)/)
        if (temp === null) {
          temp = this.result.match(/data:image\/jpg;base64,(\S*)/)
        }
        if (temp !== null) {
          _this.addParams.dyzpUrl = temp[1]
        }
      }
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg'
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      return new Promise((resolve) => {
        const isLt2M = file.size / 1024 < 400
        if (isLt2M) {
          resolve(file)
        }
        imageConversion.compressAccurately(file, 400).then(res => {
          resolve(res)
        })
      })
    },
    // 获取人员信息
    async getPersonInfo (val) {
      this.jlVisible = false
      this.ryVisible = false
      this.gwjlTotal = 0
      this.jlType = ''
      let res = await this.$http(this.$api.getPersonInfo, { gmsfhm: val })
      if (res.code === 200) {
        if (!res.data) {
          console.error('登记卡信息查询失败')
          return
        }

        let d = res.data
        this.rkbm = d.id
        this.groupCode = d.sjgsdwdm ? d.sjgsdwdm : ''
        this.ysbfParams = {
          rkbm: d.id,
          gmsfhm: d.gmsfhm
        }

        this.isClick = false

        //判断空格或中文空格
        let reg = new RegExp("^([ ]+)|([　]+)$");
        if (!d.dyzpUrl || d.dyzpUrl === "" || reg.test(d.dyzpUrl)) {
          return
        }
        this.addParams.dyzpUrl = d.dyzpUrl ? d.dyzpUrl : '' // 照片
        this.addParams.gmsfhm = d.gmsfhm || '' // 身份证号码
        this.addParams.xm = d.xm || '' // 姓名
        this.addParams.xbdm = d.xbdm || '' // 性别
        // this.addParams._xbdm = getDicVal(this.sexData, d.xbdm.trim()) // 性别
        if (d.mzdm.length === 1) {
          d.mzdm = '0' + d.mzdm
        }
        this.addParams.mzdm = d.mzdm || '' // 民族
        // this.addParams._mzdm = getDicVal(this.mzData, d.mzdm.trim()) // 民族
        // this.addParams.csrq = this.addParams.csrq.indexOf('-') === -1 ? this.addParams.csrq : this.formatBirth(d.csrq) // 出生日期
        this.addParams.csrq = d.csrq || '' // 出生日期
        this.addParams.cym = d.cym || '' // 曾用名
        this.addParams.hjdzSsxqdm = d.hjdzSsxqdm || '' // 户籍地址_省市县（区）
        this.addParams._hjdzSsxqdm = d.hjdzSsxqmc || '' // 户籍地址_省市县（区）
        if (d.hjdzQhnxxdz === ' ') {
          d.hjdzQhnxxdz = ''
        }
        this.addParams.hjdzQhnxxdz = d.hjdzQhnxxdz || '' // 户籍地址_区划内详细地址
        this.addParams.lxdh = d.lxdh || '' // 联系电话
        this.addParams.sfzqfjg = d.sfzqfjg || '' // 身份证签发机关

        this.addParams.zjzdzSsxqdm = d.zjzdzSsxqdm || '' // 暂（居）住地址_省市县（区）
        this.addParams._zjzdzSsxqdm = d.zjzdzSsxqmc || '' // 暂（居）住地址_省市县（区）
        if (d.zjzdzQhnxxdz === ' ') {
          d.zjzdzQhnxxdz = ''
        }
        this.addParams.zjzdzQhnxxdz = d.zjzdzQhnxxdz || '' // 暂（居）住地址_区划内详细地址
        this.addParams.qlrrq = this.formatBirth(d.qlrrq) || '' // 迁（流）入日期
        this.addParams.zjzcsfldm = d.zjzcsfldm || '' // 暂（居）住处所

        this.addParams.sqqx = d.sqqx || '' // 申请期限（字典类别：sqqx）

        this.rememberChangeTime = d.sqqx || ''

        this.addParams.zjzsydm = d.zjzsydm || '' // 暂（居）住事由
        // this.addParams.slly = d.slly // 受理类别（字典类别：sllb）
        this.addParams.lzdGjhdqdm = d.lzdGjhdqdm || '' // 来自地_国家（地区）
        this.addParams.lzdSsxqdm = d.lzdSsxqdm || '' // 来自地_省市县（区）
        this.addParams._lzdSsxqdm = d.lzdSsxqmc || '' // 来自地_省市县（区）
        if (d.lzdQhnxxdz === ' ') {
          d.lzdQhnxxdz = ''
        }
        this.addParams.lzdQhnxxdz = d.lzdQhnxxdz || '' // 来自地_区划内详细地址
        this.addParams.fwcs = d.fwcs || '' // 服务处所

        this.addParams.lxrGmsfhm = d.lxrGmsfhm || '' // 联系人_公民身份号码
        this.addParams.lxrXm = d.lxrXm || '' // 联系人_姓名
        this.addParams.lxrRygxdm = d.lxrRygxdm || '' // 联系人_社会关系
        this.addParams.lxrLxdh = d.lxrLxdh || '' // 联系人_联系电话
        this.addParams.lxrSsxqdm = d.lxrSsxqdm || '' // 联系人_省市县（区）
        this.addParams._lxrSsxqdm = d.lxrSsxqmc || '' // 联系人_省市县（区）
        if (d.lxrQhnxxdz === ' ') {
          d.lxrQhnxxdz = ''
        }
        this.addParams.lxrQhnxxdz = d.lxrQhnxxdz || '' // 联系人_区划内详细地址
      }
    },
    // 信息变更
    onChangeInfo () {
      if (this.rkbm) {
        let code = getStore('groupCode')
        if (this.groupCode !== '' && code !== null && code !== undefined && code !== '') {
          if (code.substring(0, 8) !== this.groupCode.substring(0, 8)) {
            this.$message({
              message: '变更记录不属于本辖区，无法办理变更！',
              type: 'error',
              customClass: 'zZindex',
              duration: 5000
            })
            return
          }
        }
        let params = JSON.parse(JSON.stringify(this.addParams))
        delete params._hjdzSsxqdm
        delete params._zjzdzSsxqdm
        delete params._lzdSsxqdm
        delete params._lxrSsxqdm
        // delete params._xbdm
        // delete params._mzdm
        params.csrq = params.csrq.replace(/-/g, '')
        params.qlrrq = params.qlrrq.replace(/-/g, '')
        params.rkbm = this.rkbm
        if (params.hjdzQhnxxdz === '') {
          params.hjdzQhnxxdz = ' '
        }
        if (params.zjzdzQhnxxdz === '') {
          params.zjzdzQhnxxdz = ' '
        }
        if (params.lxrQhnxxdz === '') {
          params.lxrQhnxxdz = ' '
        }
        this.$refs.myForm.validate((valid) => {
          if (valid) {
            if (this.timeIsChange) {
              this.addParams.sqqx = this.rememberChangeTime
              params.sqqx = this.rememberChangeTime
            }
            this.handleChangeInfo(params)
          }
        })
      } else {
        this.$message({
          message: '请先获取人员信息',
          type: 'error',
          customClass: 'zZindex',
          duration: 5000
        })
      }
    },
    // 信息变更回调
    async handleChangeInfo (params) {
      let res = await this.$http(this.$api.infoChange, params)
      console.log('变更信息项', params)
      if (res.code === 200) {
        this.sbType = '2'
        this.cardDialogVisible = true
        this.$message({
          message: '信息变更成功！',
          type: 'success',
          customClass: 'zZindex',
          duration: 5000
        })
      }
    },
    // 本地
    async queryBdData (cardNo) {
      let res = await this.$http(this.$api.bzjlBd, { gmsfhm: cardNo })
      if (res.code === 200) {
        this.gwjlTotal = (res.data && res.data.length) || 0
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.handle {
  padding-bottom: 50px;
  position: relative;
  .info-box {
    padding: 15px 30px 0;

    .box-title {
      border-bottom: 1px solid #02579a;

      .title {
        padding: 0 6px;
        height: 30px;
        line-height: 30px;
        display: inline-block;
        background-color: #02579a;
        color: #fff;
        border-radius: 6px 6px 0 0;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
      }
    }

    .box-content {
      margin-top: 20px;
      display: flex;

      .picture-box {
        width: 100px;
        height: 120px;
        position: relative;
        overflow: hidden;
        border: 1px solid #c9c9c9;

        .default-picture {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: url("../../assets/images/default-pic.png") no-repeat 50%
            17px;
          background-size: 61px 58px;

          span {
            display: inline-block;
            width: 100%;
            position: absolute;
            top: 93px;
            left: 0;
            text-align: center;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #d8dee3;
            line-height: 16px;
          }
        }

        .picture {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }

      /deep/ .form-box {
        flex: 1;
        .form {
          .is-disabled {
            .el-input__inner {
              color: #606266;
            }
          }
          .input-item {
            margin: 0 0 20px 0;
            .el-form-item__label {
              height: 30px;
              line-height: 30px;
              width: 95px;
              padding-right: 0;
            }
            &.long-label {
              .el-form-item__label {
                width: 130px;
              }
            }
            .el-form-item__content {
              line-height: 30px;
              .el-input {
                .el-input__inner {
                  width: 190px;
                  height: 30px;
                }
              }
              .el-date-editor.el-input {
                width: 190px;
              }
              .el-input__icon {
                line-height: 30px;
              }
            }
            &.long-content {
              margin-left: 15px;
              .el-form-item__content {
                .el-input {
                  .el-input__inner {
                    width: 480px;
                  }
                }
              }
            }
            &.addr-content {
              .el-form-item__content {
                .el-input {
                  .el-input__inner {
                    width: 390px;
                  }
                }
              }
            }
            &.hjdz-content {
              .el-form-item__content {
                .el-input {
                  .el-input__inner {
                    width: 380px;
                  }
                }
              }
            }
            &.hjdzxx-content {
              margin-left: 15px;
              .el-form-item__content {
                .el-input {
                  .el-input__inner {
                    width: 402px;
                  }
                }
              }
            }
            &.zz-content {
              .el-form-item__content {
                .el-input {
                  .el-input__inner {
                    width: 480px;
                  }
                }
              }
            }
            &.exp-item {
              .el-form-item__content {
                .el-input {
                  width: 190px;
                }
              }
            }
          }
        }
        .buttons {
          padding-top: 10px;
          text-align: center;
          margin-left: -150px;
          .btn-out-line {
            width: 80px;
            height: 24px;
            background: #ffffff;
            border: 1px solid #02579a;
            border-radius: 6px;
            padding: 0;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #02579a;
            line-height: 16px;
            &:last-child {
              margin-left: 20px;
            }
          }
        }
      }
    }
    &.jz-info {
      /deep/ .form-box {
        .el-form-item__label {
          width: 111px !important;
        }
        .long-label {
          .el-form-item__label {
            width: 155px !important;
          }
        }
      }
    }
    &.lxr-info {
      /deep/ .form-box {
        .input-item {
          .el-form-item__label {
            width: 112px !important;
          }
          &.long-label {
            .el-form-item__label {
              width: 155px !important;
            }
          }
        }
      }
    }
  }
  .form-button-box {
    padding-top: 30px;
    text-align: center;
    .input-item {
      .form-btn {
        padding: 0;
        width: 140px;
        height: 40px;
        line-height: 38px;
        border-radius: 0;
        border: 1px solid #02579a;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        background: #02579a;
        margin-left: 20px;
        &.outline {
          color: #02579a;
          background: #fff;
        }
        &.disabled {
          opacity: 0.6;
        }
      }
    }
  }
}
/deep/ .el-form-item__error {
  padding-top: 2px;
}
.file-wrap {
  display: flex;
  justify-content: center;
  padding: 50px 0 80px;
  .file-item {
    margin: 0 50px;
    width: 120px;
    height: 120px;
    text-align: center;
    border: 1px solid #02579a;
    border-radius: 5px;
    box-sizing: border-box;
    box-shadow: 0 0 5px #02579a;
    color: #02579a;
    cursor: pointer;
    padding-top: 15px;
    text-decoration: none;
    &:hover {
      color: #fff;
      background-color: #02579a;
    }
    .file-icon {
      font-size: 50px;
    }
    .file-name {
      padding-top: 20px;
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
